<#include "/common/taglibs.ftl" />
<@menu code='${entityName!}'/>
<title><@spring.message code="${entityName!}" /> - <@spring.message code="list" /></title>
<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    <@spring.message code="${entityName!}"/>
                </h3>
            </div>
        </div>
        <div class="m-portlet__head-tools">
            <ul class="m-portlet__nav">
                <li class="m-portlet__nav-item">
                    <a href="#" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--icon m-btn--air">
                                            <span>
                                                <i class="la la-cart-plus"></i>
                                                <span>New Record</span>
                                            </span>
                    </a>
                </li>
                <li class="m-portlet__nav-item"></li>
                <li class="m-portlet__nav-item">
                    <div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover" aria-expanded="true">
                        <a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
                            <i class="la la-ellipsis-h m--font-brand"></i>
                        </a>
                        <div class="m-dropdown__wrapper">
                            <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
                            <div class="m-dropdown__inner">
                                <div class="m-dropdown__body">
                                    <div class="m-dropdown__content">
                                        <ul class="m-nav">
                                            <li class="m-nav__section m-nav__section--first">
                                                <span class="m-nav__section-text">Quick Actions</span>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-share"></i>
                                                    <span class="m-nav__link-text">Create Post</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-chat-1"></i>
                                                    <span class="m-nav__link-text">Send Messages</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-multimedia-2"></i>
                                                    <span class="m-nav__link-text">Upload File</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__section">
                                                <span class="m-nav__section-text">Useful Links</span>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-info"></i>
                                                    <span class="m-nav__link-text">FAQ</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__item">
                                                <a href="" class="m-nav__link">
                                                    <i class="m-nav__link-icon flaticon-lifebuoy"></i>
                                                    <span class="m-nav__link-text">Support</span>
                                                </a>
                                            </li>
                                            <li class="m-nav__separator m-nav__separator--fit m--hide">
                                            </li>
                                            <li class="m-nav__item m--hide">
                                                <a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">Submit</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="m-portlet__body">
        <div class="table-container">
            <div class="search-filters m--margin-bottom-20">
                <div class="row m--margin-bottom-20">
                    <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                        <label><@spring.message code="user.name"/></label>
                        <input type="text" class="form-control m-input form-filter" placeholder="E.g: zhansgan" name="search_LIKE_name_OR_enName_OR_loginName">
                    </div>
                    <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                        <label><@spring.message code="user.email"/></label>
                        <input type="text" class="form-control m-input form-filter" placeholder="E.g: 12345678@qq.com" name="search_LIKE_email">
                    </div>
                    <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                        <label><@spring.message code="user.gender"/></label>
                        <select class="form-control m-input form-filter" name="search_EQ_gender">
                            <option value=""><@spring.message code="select..." /></option>
                            <#list genders as item>
                                <option value="${item}"><@spring.message code="${item.info}"/></option>
                            </#list>
                        </select>
                    </div>
                </div>

                <#--<div class="m-separator m-separator--md m-separator--dashed"></div>-->

                <div class="row">
                    <div class="col-lg-12">
                        <button class="btn btn-brand m-btn m-btn--icon filter-submit">
                            <span>
                                <i class="la la-search"></i>
                                <span><@spring.message code="button.search"/></span>
                            </span>
                        </button>
                        &nbsp;&nbsp;
                        <button class="btn btn-secondary m-btn m-btn--icon filter-cancel">
                            <span>
                                <i class="la la-close"></i>
                                <span><@spring.message code="button.reset"/></span>
                            </span>
                        </button>
                    </div>
                </div>

            </div>
            <table class="table table-striped- table-bordered table-hover table-checkable" id="datatable"
                   data-datatable="true"
                   data-datatable-advance-search="show"
                   data-datatable-draw-callback="drawCallback"
                   data-datatable-quick-search-filter="search_LIKE_name_OR_loginName_OR_email"
            >
                <thead>
                    <tr role="row" class="heading">
                        <th width="1%" data-checkable="true" data-orderable="false"></th>
                        <th width="5%" data-data="id" data-searchable="false"> ID# </th>
                        <th width="10%" data-data="name"> <@spring.message code="user.name"/> </th>
                        <th width="10%" data-data="enName"> <@spring.message code="user.enName"/> </th>
                        <th width="10%" data-data="loginName"> <@spring.message code="user.loginName"/> </th>
                        <th width="10%" data-data="mobile"> <@spring.message code="user.mobile"/> </th>
                        <th width="10%" data-data="gender" data-render="renderGender" data-search-type="<@searchTypeSelect items=genders/>"> <@spring.message code="user.gender" /> </th>
                        <th data-data="email"> <@spring.message code="user.email"/> </th>
                        <th width="20%" data-data="activated" data-render="renderBoolean" data-search-type="<@searchTypeSelectBoolean/>"> <@spring.message code="activated"/> </th>
                        <th width="20%" class="center" data-data="lastModifiedDate" data-search-type="daterange" data-render="renderDateTime"> <@spring.message code="lastModifyDate"/> </th>
                        <th width="20%" data-actions="111"> <@spring.message code="action"/> </th>
                        <#--<th width="20%" data-actions="<@tableColumnButtons resourceIdentity='${resourceIdentity!}'/>"> <@spring.message code="action"/> </th>-->
                    </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>
</div>

<page-plugin-style>
    <link href="${theme}/assets/vendors/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
</page-plugin-style>
<page-style>
</page-style>

<page-plugin-script>
    <script src="${theme}/assets/vendors/custom/datatables/datatables.bundle.js" type="text/javascript"></script>
    <script src="${static}/scripts/m.datatable.js" type="text/javascript"></script>
</page-plugin-script>
<page-script>
    <script>
        function renderGender( data, type, full, meta ){
            if(data=='male'){
                return '<@spring.message code="gender.male"/>';
            } else {
                return '<@spring.message code="gender.female"/>';
            }
        }

        var drawCallback = function(grid, $table){
            if(grid.getDataTable().data().length==0) return;
            console.log('user table draw callback', grid, $table);
        }

        jQuery(function($){
            /*$.m.datatable({
                src: "#datatable",
                dataTable: {
                    columnDefs: [
                        {
                            targets: -1,
                            title: 'Actions',
                            orderable: false,
                            render: function(data, type, full, meta) {
                                return '<span class="dropdown">\n    <a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">\n      <i class="la la-ellipsis-h"></i>\n    </a>\n    <div class="dropdown-menu dropdown-menu-right">\n        <a class="dropdown-item" href="#"><i class="la la-edit"></i> Edit Details</a>\n        <a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\n        <a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\n    </div>\n</span>\n<a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="View">\n    <i class="la la-edit"></i>\n</a>';
                            },
                        }
                    ],
                }
            });*/
        });
    </script>
</page-script>